mbti (개인)

배포주소: https://jb-mbti.firebaseapp.com

깃허브 주소: https://github.com/jbinyim/EZENCLASS/tree/master/240425-mbti/01-mbti

📅 작업기간

2024-04-25

📍 주요기술

• react

🔦 상세기술

• 자신의 mbti를 확인해 볼 수 있는 사이트입니다.
• useState를 사용하여 현재 질문 번호와 총 점수를 관리합니다. MBTI의 네 가지(EI, SN, TF, JP) 각각에 대한 점수를 배열로 저장합니다.
• ProgressBar를 사용하여 사용자가 설문조사에서 얼마나 진행했는지 시각적으로 표시합니다.
• 사용자가 버튼을 클릭하면, 함수가 호출되어 사용자의 선택(점수 증가)을 기반으로 총 점수를 업데이트하고, 다음 질문으로 넘어갑니다.
• 모든 질문에 답하면, 사용자의 MBTI 유형을 계산하고, 이를 쿼리 파라미터로 포함하여 결과 페이지로 사용자를 리디렉션합니다. 이 때 MBTI 결과를 쿼리 파라미터로 전달합니다.

📕 개발이야기

사용자가 MBTI 테스트를 완료한 후, 결과 페이지에서 해당 MBTI에 맞는 결과와 설명을 보여줍니다. 사용자는 결과 페이지에서 테스트 다시하기 버튼을 눌러 메인 페이지로 돌아갈 수 있습니다. useEffect 훅을 사용하여 URL에서 MBTI 값을 가져와 해당 결과 데이터를 찾고 상태를 업데이트합니다.